<template>
  <!-- 
1.创建路由对象routes: 映射关系*history: 修改url的模式(hash/history)
2.让路由对象生效*app.use(router)
3.router-view的占位
4.router-link进行路由的切损
   -->
  <nav>

    <!--
       router-link事实上有很多属性可以配置:
        to属性:
          口 是一个字符串，或者是一个对象

        replace属性:
          口设置 replace 属性的话，当点击时，
            会调用 router.replace()，而不是 router. push();

        active-class属性: 
          口设置激活a元素后应用的class，默认是router-link-active 
        
         
        exact-active-class属性:
            口链接精准激活时，应用于渲染的 <a>的 class，默认是router-link-exact-active;
        -->

    <!-- replace 不会记录历史 -->
    <!-- active-class="link-active" -->
    <router-link to="/home"  >Home</router-link> |
    <router-link :to="{path:'/about'}" active-class="link-active">About</router-link> |
    <router-link :to="{path:'/admin'}" active-class="link-active">Admin</router-link> |
    <router-link :to="{path:'/user/123'}" active-class="link-active">User</router-link> |
    <router-link :to="{path:'/order'}" active-class="link-active">订单</router-link> | 
    <router-link :to="{path:'/user/321'}" active-class="link-active">User-321</router-link>
    |
    <router-link :to="{path:'/aaa'}" active-class="link-active">NotFound</router-link>
  </nav>
  <!-- <div>
    <span @click="homeSpanClick">首页</span>
    <button @click="aboutBtnClick">关于</button>
  </div> -->
  <router-view/>
</template>
<script setup>
import { useRouter } from 'vue-router';

const router = useRouter()
  function homeSpanClick(){
      console.log("homeSpanClick");
      // 跳转首页 第一种
      router.push("/home")
      // 第二种方式
      router.push({path:"/home"})
  }
  function aboutBtnClick(){
      console.log("aboutBtnClick");
      // 跳转about
      router.push("/about")
      // 传参
      router.push({path:"/about",query:{name:"inzv",age:18}})


  }
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}


nav a.router-link-exact-active {
  color: #e16c96;
  font-size: 20px;
}
</style>
